import React from 'react';
import { Empty } from 'antd';
import ReactEcharts from '@/components/Echarts';

const CbxlChart = ({ data }) => {
    const getOption = echartData =>
        // 只展示有数据的结果
        // const innerData = echartData.filter(v => v.value !== 0);
        ({
            tooltip: {
                trigger: 'item',
                formatter: '{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                right: 40,
                top: 40,
                align: 'left',
                type: 'scroll',
                data: data.map(item => item.name)
            },
            series: [
                {
                    name: '',
                    type: 'funnel',
                    // width: '80%',
                    // data: innerData.map(item => ({
                    //     name: item.name,
                    //     value: item.value
                    // })),
                    data: echartData,
                    top: 40,
                    left: 20,
                    maxSize: '60%',
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: { show: false }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    }
                }
            ]
        });
    return (
        <div>
            {!data || data.length === 0 ? (
                <Empty style={{ margin: '89px 0' }} image={Empty.PRESENTED_IMAGE_SIMPLE} />
            ) : (
                <ReactEcharts option={getOption(data)} />
            )}
        </div>
    );
};

export default CbxlChart;
